<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>库存盘点管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		#remark{
			margin:auto;
			width: 95%;
			border: 1px solid;
			border-color: #ccc;
			border-radius:5px;
		}
		table thead tr {
			background: rgb(190, 190, 194);
		}
	</style>
	
</head>
<body>
	<tags:message content="${message}"/>
	<div class="icon-buttons">
		<a id="cancelBtn" href="${ctx}/inventory/storeInventoryCheck/cancel" data-icon="back" data-iconpos="notext" data-role="button" data-inline="true" onclick="return confirmx('确认要取消此次该库存盘点吗？', this.href)">返回</a>
		<input type="button" data-inline="true" onclick="finishCheck()" data-icon="check" data-iconpos="notext" value="完成盘点"/>
	</div>
	<div class="middleCls">
		<input type="button" data-icon="plus" data-role="button" data-inline="true" onclick="addProduct(0)" value="系统产品"/>
		<input type="button" data-icon="plus" data-role="button" data-inline="true" onclick="addProduct(1)" value="自营产品"/>
	</div>
	<div class="form-input">
		<label class="middleCls"><h2>库存盘点产品列表</h2></label>
		<table id="contentTable" data-role="table" class="ui-responsive table-stroke">
			<thead>
				<tr>
					<th>渠道</th>
					<th>分类</th>
					<th>名称</th>
					<th>规格</th>
					<th>零售价</th>
					<th>原始数量</th>
					<th>损失数量</th>
				</tr>
			</thead>
			<tbody>
				<c:if test="${empty productScopeList}">
					<tr>
						<td colspan="7" class="middleCls">
								没有添加盘点产品，请添加！
						</td>
					</tr>
				</c:if>
				<c:if test="${not empty productScopeList}">
					<c:forEach items="${productScopeList}" var="scopeProduct">
						<c:if test="${scopeProduct.product_type == 0}">
							<tr id="${scopeProduct.id}" price="${scopeProduct.product.retail_price}" max = "${fns:getStoreProduct(scopeProduct.id).amount}" amount="${scopeProduct.amount}">
								<td>
									${fns:getDictLabel(scopeProduct.product_type, 'product_type', '')}
								</td>
								<td>${scopeProduct.product.productCategory.name}</td>
								<td>${scopeProduct.product.name}</td>
								<td>${scopeProduct.product.spec}</td>
								<td>${scopeProduct.product.retail_price}</td>
								<td>${fns:getStoreProduct(scopeProduct.id).amount}</td>
								<td>
									<div id="lostAmount-${scopeProduct.id}">${fns:getStoreProduct(scopeProduct.id).amount - scopeProduct.amount}</div>
								</td>
							</tr>	
						</c:if>
						<c:if test="${scopeProduct.product_type == 1}">
							<tr id="${scopeProduct.id}" price="${scopeProduct.storeSelfProduct.retail_price}" max = "${fns:getStoreProduct(scopeProduct.id).amount}" amount="${scopeProduct.amount}">
								<td>
									${fns:getDictLabel(scopeProduct.product_type, "product_type", "")}
								</td>
								<td>${scopeProduct.storeSelfProduct.storeSelfProductCategory.name}</td>
								<td>${scopeProduct.storeSelfProduct.name}</td>
								<td>${scopeProduct.storeSelfProduct.spec}</td>
								<td>${scopeProduct.storeSelfProduct.retail_price}</td>
								<td>${fns:getStoreProduct(scopeProduct.id).amount}</td>
								<td>
									<div id="lostAmount-${scopeProduct.id}">${fns:getStoreProduct(scopeProduct.id).amount - scopeProduct.amount}</div>
								</td>
							</tr>
						</c:if>
					</c:forEach>
				</c:if>
			</tbody>
		</table>
	</div>
	<hr style="width: 95%;" />
	<h2 class="middleCls">备注</h2>
	<textarea id="remark"  cols="10" rows="5" maxlength="512">${remark}</textarea>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#contentTable tbody tr").click(function(){
				if (!this.id) {
					return;
				}
				$("#contentTable tbody tr").removeClass("select_active");
				$(this).addClass("select_active");
				showOperateMenu(this);
			});
			var height = $(window).height() - $(header).height()*2-8;
			$(window).on("orientationchange",function(e){
				history.pushState(null, "page 2", "${ctx}/inventory/storeInventoryCheck/detailList");
			//	window.location.href = "${ctx}/inventory/storeInventoryCheck/detailList";
			});
			$("#contentTable").tableScroll({
				height:height*0.6
			});
			$("#inputForm").validate({
				submitHandler: function(form){
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			$("#remark").blur(function(){
				updateRemark(this.value);
			});
		});
		var item;
		function showOperateMenu(product){
			var id = product.id;
			var max = $(product).attr("max");
			var price = $(product).attr("price");
			var amount = $(product).attr("amount");
			item = $("#opreation-"+ id);
			
			if(item.length > 0) {
				item.remove();
				this.event.stopPropagation();
				return;
			}
			var lost = calcLostMoney(id, max, amount,price);
			$(".opreation").remove();
			var html= "<tr id='opreation-" + id + "' class='opreation'><td colspan='7'>";
				html += "<label style='display:inline-block;'>现存数量&nbsp;：&nbsp;</label>";
				html += "<input type='button' class='menu-minus' data-inline='true' data-iconpos='notext'  data-icon='minus'/>";
				html += "<input type='text' readonly='true' class='amountCls' id='amount-"+id+"' data-inline='true' data-icon='plus' value='" + amount+ "' max='"+max+"' style='width:3.5em;'/>&nbsp;&nbsp;";
				html += "<input type='button' class='menu-plus' data-inline='true' data-iconpos='notext' data-icon='plus'/>&nbsp;&nbsp;&nbsp;&nbsp;";
				html += "损失金额&nbsp;：<label id='lostMoney-" + id + "' style='display:inline-block;'>" + lost + "</label>&nbsp;元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
				html += "<input type='button' class='menu-del' data-iconpos='notext' data-icon='delete' data-inline='true'/></td></tr>";
			var plus = function(){
				var amountText = $("#amount-" + id);
				if (amountText.val()) {
					var afterPlus = plusAmount(amountText.val(), max);
					if (afterPlus) {
						amount ++;
						lost = calcLostMoney(id, max, amount,price);
						amountText.val(amount);
						$("#lostMoney-" + id).html(lost);
						$("#lostAmount-" + id).html(parseInt(max) - parseInt(amount));
						$("#" + product.id).attr("amount", amount);
						updateProductAmount(id, amount);
					}
				}
			};
			var minus = function(){
				var amountText = $("#amount-" + id);
				if (amountText.val()) {
					var afterMinus = minusAmount(amountText.val());
					if (afterMinus != null) {
						amount --;
						lost = calcLostMoney(id, max, amount,price);
						amountText.val(amount);
						$("#lostMoney-" + id).html(lost);
						$("#lostAmount-" + id).html(parseInt(max) - parseInt(amount));
						$("#" + product.id).attr("amount", amount);
						updateProductAmount(id, amount);
					}
				}
			};
			var del = function(){
				deleteProduct(id);
				$(".opreation").remove();
			};
			$(".menu-del").die().live('click',del);
			$(".menu-plus").die().live('click',plus);
			$(".menu-minus").die().live('click',minus);
			$("#" + product.id).after(html);
			$("#contentTable").trigger("create");
			this.event.stopPropagation();
		}
		function minusAmount(value){
			if (isNaN(value)){
				showTip("请输入数字！");
				return; 
			}
			if (parseInt(value) == 0) {
				showTip("数量不能小于0！");
				return;
			}
			return value;
		}
		function plusAmount(value, max){
			if (isNaN(value)){
				showTip("请输入数字！");
				return; 
			}
			if (parseInt(value) >= parseInt(max)) {
				showTip("数量不能超过最大库存！");
				return;
			}
			return value;
		}
		function updateProductAmount(productId, amount){
			if (!productId) {
				return;
			}
			if (!amount) {
				return;
			}
			var url = "${ctx}/inventory/storeInventoryCheck/updateAmount?productId=" + productId + "&amount=" + amount;
			syncToServer(url);
		}
		function addProduct(type){
			var fun = function(){
				var addIds = "";
				var items = $('#dialog-mult-select ul li input');
				for(var i=0; i<items.length; i++) {
					var item = $(items[i]);
					if(item.prop("checked") == true) {
						var id = item.attr("id");
						addIds += id + ",";
					};
				}
				var url = "${ctx}/inventory/storeInventoryCheck/saveProduct?productIds=" + addIds;
				window.location.href = url;
			};
			var url = "${ctx}/inventory/storeInventoryCheck/selectProduct?type=" + type;
			global.multSelectDialog(url, "选择产品", "", fun);
		}
		function deleteProduct(productId){
			if (!productId) {
				return;
			}
			var url = "${ctx}/inventory/storeInventoryCheck/deleteProduct?productId=" + productId;
			var fun = function(){
				$("#" + productId).attr("class",'hide');
				syncToServer(url);
			};
			global.confirm("确定不盘点此产品？",fun);
		}
		function updateRemark(remark){
			if (!remark) {
				return;
			}
			var url = "${ctx}/inventory/storeInventoryCheck/updateRemark?remark=" + remark;
			syncToServer(url);
		}
		function calcLostMoney(productId,before,after,price){
			var lost = (parseInt(before) - parseInt(after)) * parseInt(price);
			return lost;
		}
		function finishCheck(){
			if (!"${productScopeList}"){
				showTip("没有选择产品！");
				return;
			}
			var url= "${ctx}/inventory/storeInventoryCheck/finish";
			var fun = function(){
				window.location.href = url;
			};
			global.confirm("确定完成盘点并保存数据库？",fun);
		}
	</script>
</body>
</html>
